import { Tooltip, Tour } from 'antd'
import { FC, useMemo, useState } from 'react'
import useTriggerOutset from '../../../../hooks/useClickOutset'
const emojis = '😀,😃,😄,😁,😆,😅,😂,🤣,😊,😇,🙂,🙃,😉,😌,😍,😘,😗,😙,😚,😋,😛,😝,😜,🤪,🤨,🧐,🤓,😎,🤩,😏,😒,😞,😔,😟,😕,🙁,😣,😖,😫,😩,😢,😭,😮,💨,😤,😠,😡,🤬,🤯,😳,😱,😨,😰,😥,😓,🤗,🤔,🤭,🤫,🤥,😶,🌫️,😐,😑,😬,🙄,😯,😦,😧,😮,😲,😴,🤤,😪,😵,💫,🤐,🤢,🤮,🤧,😷,🤒,🤕,🤑,🤠,😈,👿,👹,👺,🤡,💩,👻,💀,👽,👾,🤖,🎃,😺,😸,😹,😻,😼,😽,🙀,😿,😾,🐶'
const Index: FC<any> = ({children, handleSelectEmoji}) => {
    const emojiList = useMemo(() => emojis.split(','), [])
    const [open, setOpen] = useState(false)
    useTriggerOutset(function (e:any) {
        if (open) {
            setOpen(false)
        }
    }, 'click', '.emoji-tooltip', '.emoji-trigger')
    const handleSelect = (emojiValue: string) => {
        handleSelectEmoji(emojiValue)
        setOpen(false)
    }

   return <Tooltip
        trigger="click"
        placement="top"
        rootClassName="tools-menu-tooltip emoji-tooltip"
        color="#272a37"
        arrow
        open={open}
        title={
            <div className='w-[364px] max-h-[300px] overflow-y-auto select-none'>
                <ul className='flex flex-wrap'>
                    {emojiList.map((one, index) => <li 
                        key={index}
                        className=' rounded-md hover:bg-[#3b3e4d] text-xl cursor-pointer duration-300 w-[28px] aspect-square flex justify-center items-center'
                        onClick={() => handleSelect(one)}
                    >{one}</li>)}
                </ul>
            </div>
        }
        >
        <div className='emoji-trigger' onClick={() => setOpen(true)}>
            {children}
        </div>
    </Tooltip> 
}

export default Index